<template>
	<view class="content">
		<view class="head" style="background-image: url('../../static/images/login/login_bg.png');background-repeat: no-repeat;width: 100%;background-size: 100% 100%;">
			<view>
				<image class="imglogo" src="../../static/images/login/logo.png" mode=""></image>
			</view>
			<view class="top_title"><text class="title">智助教育</text></view>
		</view>
		<view class="group">
			<view class="phone">
				<i class="iconfont iconzhanghaoxinxi"></i>
				<input v-model="phone" class="input_phone" type="text" placeholder="请输入手机号码" name="phone" autocomplete="off"/>
			</view>
			<view class="password">
				<i class="iconfont iconmima1"></i>
				<input v-model="password" class="input_password" type="password" placeholder="请输入密码" name="password" autocomplete="off"/>
			</view>
			<view class="verify">
				<view class="verify_left">
					<i class="iconfont iconyanzhengma"></i>
					<input v-model="verify" class="input_verify" type="text" placeholder="请输入验证码" name="verify" autocomplete="off"/>
				</view>
				<view class="cus_yan" @click="refresh">
					<imgcode ref="imgcode" @getValue="ChangeCode"></imgcode>
				</view>
			</view>
		</view>
		<view class="foot_group">
			<view class="radio_text_psw" @click="show_check_box">
				<checkbox :checked="check_box" class="check" />
				<text class="check_text">记住密码</text>
			</view>
			<button @click="check_login" class="check_login">登录</button>
			<view>
				<navigator hover-class="false" url="register" class="register">现在注册!</navigator>
				<navigator hover-class="false" url="../user/forget-pwd" class="search ">忘记密码?</navigator>
			</view>
		</view>
		<view class="oauth-row" v-if="hasProvider" v-bind:style="{ top: positionTop + 'px' }">
			<text class="wx_login"></text>
			<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
				<image :src="provider.image" @tap="oauth(provider.value)" class="image"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Checker from '@/common/graceChecker.js';
	import imgcode from '@/components/imgcode.vue';
	import util from '@/common/util.js';

	export default {
		data() {
			self = this;
			return {
				phone: '',
				password: '',
				verify: '',
				check_box: false,
				k_token: '',
				providerList: [], //第三方登录 返回 服务商列表
				hasProvider: true, //根据sdk 设置 第三方登录，是否显示
				positionTop: 0, //定位第三方登录按钮位置，防止拉取键盘后，按钮上推
				Verification_key: '',
				Verification_va: ''
			};
		},
		components: {
			imgcode
		},
		onReady() {
			this.initPosition();
			this.initProvider();
		},
		onLoad() {
			this.phone = uni.getStorageSync('phone');
			this.password = uni.getStorageSync('password');
			if (uni.getStorageSync('token')) {

				this.$api.apiPost('user/currency.basic/GetUserInfo').then(res => {
					if (res.data.code == 200) {
						// #ifndef APP-PLUS
						self.setJYJPushTags(String(res.data.data.identifier));
						// #endif
						var school = res.data.data.school; //学校名称
						if (school == null) {
							uni.showModal({
								title: '提示',
								content: '请完善个人资料',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: 'means'
										});
									} else if (res.cancel) {
										return;
									}
								}
							});
						} else {
							/**
							 * 保存学生信息
							 */
							uni.setStorageSync('userInfo', res.data.data);
							uni.reLaunch({
								url: '../school/index'
							});
						}
					} else {
						uni.showToast({
							title: '此账号在别处登录，建议修改密码重新登录！',
							icon: 'none'
						});
					}
				});
			}
		},
		onShow() {
			this.show();
		},
		methods: {
			initProvider() {
				const filters = ['weixin'];
				uni.getProvider({
					service: 'oauth',
					success: res => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i],
										image: '../../static/' + res.provider[i] + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: err => {
					}
				});
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				//this.positionTop = uni.getSystemInfoSync().windowHeight - 50;
			},
			oauth(value) {
				uni.login({
					provider: value,
					scopes: 'auth_user',
					success: res => {
						uni.getUserInfo({
							provider: value,
							success: infoRes => {
								self.accessLogin(infoRes.userInfo);
							}
						});
					},
					fail: err => {
					}
				});
			},
			accessLogin(res) {
				var pamars = {
					openId: res.openId,
					nickName: res.nickName,
					avatarUrl: res.avatarUrl,
					gender: res.gender,
					register_type: 1
				};
				this.$api.apiPost('user/currency.user/accessLogin', pamars).then(rs => {
					if (rs.data.code == 200) {
						uni.setStorageSync('token', rs.data.data.k_token);
						self.getaToken({
							k_token: rs.data.data.k_token
						});
						self.getLogin({
							k_token: rs.data.data.k_token
						});
					} else if (rs.data.code == 100200) {
						//绑定手机
						uni.navigateTo({
							url: 'accessPhone?openId=' + res.openId
						});
					}
				});
			},
			getaToken: function(datas) {
				uni.showLoading({
					title: '正在登录中.....',
					mask: false
				});
				this.$zbapi.apiPost('login/account', datas).then(res => {
					var data = res.data;
					uni.hideLoading();
					if (data.code == 0) {
						uni.setStorageSync('atoken', data.data.a_token);
						self.getLogin(datas);
					} else {
						this.refresh();
						uni.showToast({
							icon: 'none',
							title: data.msg
						});
					}
				});
			},
			refresh: function() {
				this.$refs.imgcode.refresh();
			},
			show: function() {
				var _this = this;
				setTimeout(function() {
					_this.refresh();
				}, 500);
			},
			check_login: function() {
				var _phone = uni.getStorageSync('phone');
				if(this.phone != _phone) {
					uni.clearStorageSync();
				}
				//获取验证码图片的值
				var cmverify = uni.getStorageSync('imgcode');
				//验证规则
				var rule = [{
						name: 'phone',
						checkType: 'phoneno',
						checkRule: '',
						errorMsg: '请输入正确的手机号'
					},
					{
						name: 'pwd',
						checkType: 'notnull',
						checkRule: '',
						errorMsg: '密码不能为空'
					},
					{
						name: "verify",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					}
				];
				//验证数据
				var data = {
					phone: this.phone,
					pwd: this.password,
					verify: this.verify
				};
				var getCheck = Checker.check(data, rule);
				if (!getCheck) {
					uni.showToast({
						title: Checker.error,
						icon: 'none',
						mask: false,
						duration: 1500
					});
					return;
				}
				//验证结束
				//处理记住密码操作
				if (this.check_box) {
					uni.setStorageSync('phone', this.phone);
					uni.setStorageSync('password', this.password);
				} else {
					uni.setStorageSync('phone', '');
					uni.setStorageSync('password', '');
				}
				//进行服务器的验证
				var datas = {
					'phone': this.phone,
					'pwd': this.password,
					'login_type': 1,
					'Verification_key': this.Verification_key,
					'Verification_val': this.verify,
					'_machine_code': '1234'
				};	
				this.$api.apiPost('user/currency.user/Login', datas).then(res => {
					if (res.data.code == 200) {
						this.k_token = res.data.data.k_token;
						uni.setStorageSync('token', this.k_token);
						var datas2 = {
							k_token: this.k_token
						};
						self.getLogin(datas2);
						self.getaToken(datas2);
					} else {
						this.refresh();
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			//设置标签
			setJYJPushTags(tg) {
				// #ifdef APP-PLUS
				const jyJPush = uni.requireNativePlugin('JY-JPush');
				//设置标签模式
				// jyJPush.setJYJPushTags({
				// 	userTag: tg
				// }, result => {
				// 	// uni.showToast({
				// 	// 	icon: 'none',
				// 	// 	title: JSON.stringify(result)
				// 	// })
				// });

				//设置别名模式
				jyJPush.setJYJPushAlias({
						userAlias: tg
					},
					result => {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: JSON.stringify(result)
						// })
					}
				);
				// #endif
			},
			getLogin(datas2) {
				this.$api.apiPost('user/currency.basic/GetUserInfo', datas2).then(res => {

					// #ifdef APP-PLUS
					// self.setJYJPushTags(String(res.data.data.identifier));
					// #endif
					var school = res.data.data.school; //学校名称
					if (res.data.data.users_type != 1) {
						uni.showToast({
							title: '请用学生账号登录',
							mask: false,
							duration: 1500
						});
						this.refresh();
						uni.setStorageSync('token', '');
						uni.setStorageSync('atoken', '');
						return;
					}
					if (school == null) {
						uni.showModal({
							title: '提示',
							content: '请完善个人资料',
							success: function(res) {
								if (res.confirm) {
									setTimeout(function() {
										uni.redirectTo({
											url: 'means'
										});
									}, 500);
								} else if (res.cancel) {
									return;
								}
							}
						});
					} else {
						/**
						 * 保存学生信息
						 */
						uni.setStorageSync('phone', this.phone);
						uni.setStorageSync('userInfo', res.data.data);
						uni.showToast({
							title: '登录成功',
							duration: 1500
						});
						this.$api.apiPost('user/ciondetails.Users/addRecord').then(res => {
							if (res.data.code == 200) {
								return;
							}
						});
						setTimeout(function() {
							uni.reLaunch({
								url: '../school/index'
							})
							// uni.switchTab({
							// 	url: '../school/index'
							// });
						}, 1500);
					}
				});
			},
			show_check_box: function() {
				this.check_box = !this.check_box;
			},
			ChangeCode(data) {
				this.Verification_key = data.key;
				this.Verification_val = data.value;
			}

		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	html {
		background-color: #ffffff;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		background-size: 100% 100%;
		background-color: #ffffff;
	}

	.head {
		padding-top: 0upx;
		text-align: center;
		width: 100%;
		height: 412upx;
	}

	.imglogo {
		width: 260upx;
		height: 260upx;
		margin-top: 80upx;
	}

	.top_title {
		margin-top: -40upx;
	}

	.title {
		font-size: 42upx;
		color: #ffffff;
		font-family: '微软雅黑';
	}

	.group,
	.foot_group {
		margin: 75upx 80upx 40upx;
	}

	.foot_group {
		margin-top: 0;
	}

	.iconfont {
		color: #00d5a2;
		font-size: 50upx;
		margin-right: 10upx;
	}

	input,
	input::-webkit-input-placeholder {
		border-bottom: 2upx solid #e5e5e5;
		color: #999999;
		font-size: 36upx;
		width: 532upx;
		height: 68upx;
		line-height: 80upx;
		margin-top: 10upx;
	}

	input {
		color: #000000;
	}

	.phone,
	.password,
	.verify {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		width: 100%;
		padding-bottom: 5upx;
		padding-top: 20upx;
	}

	.input_verify {
		width: 370upx;
	}

	.verify_left {
		display: flex;
		justify-content: flex-start;
	}

	.cus_yan {
		width: 156upx;
		height: 66upx;
		border: 1px solid #707070;
		display: flex;
		justify-content: center;
		margin-top: 10upx;
	}

	.radio_text_psw {
		font-size: 30upx;
		margin-top: 8upx;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.check {
		height: 50upx;
		line-height: 50upx;
		transform: scale(0.7);
	}

	.check_text {
		height: 50upx;
		line-height: 57upx;
		font-size: 30upx;
		margin-left: -10upx;
	}

	.check .wx-checkbox-input {
		margin-right: 10upx;
		-webkit-appearance: none;
		appearance: none;
		outline: 0;
		border: 2upx solid #999999;
		background-color: #ffffff;
		border-radius: 6upx;
		width: 22px;
		height: 22px;
		position: relative;
	}

	.check .wx-checkbox-input.wx-checkbox-input-checked {
		background-color: #ffffff;
		color: #666666 !important;
	}

	.check .wx-checkbox-input.wx-checkbox-input-checked:before {
		font-size: 60upx !important;
	}

	.check_login {
		margin-top: 40upx;
		width: 100%;
	}

	button {
		margin-top: 40upx;
		background: #00d5a2;
		color: #ffffff;
		font-family: '宋体';
		font-size: 36upx;
		border-radius: 8upx;
		height: 80upx;
		line-height: 80upx;
	}

	button:after {
		border: none;
	}

	.register {
		margin-top: 18upx;
		float: left;
		font-size: 34upx;
		color: #666666;
	}

	.search {
		margin-top: 18upx;
		color: #666666;
		font-size: 34upx;
		float: right;
	}

	.wx_login {
		width: 330upx;
		display: flex;
		text-align: center;
		margin: auto;
		justify-content: center;
		color: #666666;
		position: relative;
		border-bottom: 1px solid #c7c7c7;
		top: 45upx;
	}

	.wx_login:after {
		content: '快速登录';
		width: 150upx;
		background: #ffffff;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -25upx;
		margin-left: -77upx;
		z-index: 9;
	}

	.oauth-row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		top: 0upx;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		width: 100%;
		height: 100%;
		margin: 0;
		text-align: center;
		display: flex;
		position: relative;
	}

	.oauth-image .image {
		width: 70upx;
		height: 70upx;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: 105upx;
		margin-left: -38upx;
	}
</style>
